<template>
	<view class="flex-col page min-vh-100 " style="background-color: #F3F3F3;">
		<view class="" style="text-align: center;color: black;margin-top: 30rpx;">
			<text>请在3分钟内完成支付:</text>
			<u-count-down timestamp="180" separator="zh" separator-color="#000000" :show-days="false"
				:show-hours="false" style="margin-left: 20rpx;" @end="deleteOrder"></u-count-down>
		</view>
		<view class="px-3 mt-12">
			<view class="bg-white brs-12 overflow-hidden" style="box-shadow: 0px 0px 12px rgba(39, 44, 103, 0.2);">
				<view class="font-600 ps-3 info py-2" style="color: #FFFFFF;">
					预约信息
				</view>
				<view class="d-flex align-content-start ps-3 pt-3">
					<image class="img-36" src="../../static/imgs/position.png" mode="" style="margin-top: 6rpx;">
					</image>
					<view class="font-600 text-222426 ps-1 flex-1">
						{{orderInfo.room_name||'-'}}-{{orderInfo.store_name||'-'}}
					</view>
				</view>
				<view class="d-flex align-items-center ps-3  pt-1 mt-2">
					<image class="img-36" src="../../static/imgs/calendar.png" mode=""></image>
					<view class="font-bold text-666D73 ps-1 "><text
							class="pe-2">{{moment(orderInfo.starttime).format('YYYY/MM/DD')}}</text>
						<text>{{moment(orderInfo.starttime).format('HH:mm')}}-{{moment(orderInfo.endtime).format('HH:mm')}}</text>
					</view>
				</view>
				<view class="d-flex align-content-start ps-3 pt-1 mt-2">
					<image class="img-36" src="../../static/imgs/clock.png" mode="" style="margin-top: 6rpx;">
					</image>
					<view class="font-600 text-222426 ps-1 flex-1">结算时长 {{(orderInfo.duration/60)||'-'}}小时
					</view>
				</view>
				<view class="d-flex align-content-start ps-3 pb-3 mt-2 pt-1">
					<image class="img-36" src="../../static/imgs/pricepay.png" mode="" style="margin-top: 6rpx;">
					</image>
					<view class="font-600 text-222426 ps-1 flex-1">应支付价格{{orderInfo.price||'-'}}元
					</view>
				</view>
			</view>
			<view class="bg-white brs-12 overflow-hidden mt-12 " style="padding:0 34rpx;box-shadow: 0px 0px 12px rgba(39, 44, 103, 0.2);">
				<view class="pt-3 d-flex font-16 font-600">
					<view class="flex-1 u-text-center tab " :class="{active:index==current}" v-for="item,index in list"
						:key="index" @click="changeTabs(index)">{{item.name}}</view>
				</view>
				<view class="pt-58" v-if="!current">
					<view class="d-flex justify-between font-14">
						<view class="text-606266">所选卡券</view>
						<view class="" @click="chooseCard">
							<text class="me-1 font-600">{{card_info.card_name ?card_info.card_name:'请选择'}}</text>
							<u-icon name="arrow-down" color="#889297"></u-icon>
						</view>
						<!-- <view class="" v-else>
							暂无可用卡券
						</view> -->
					</view>
					<view class="d-flex justify-between font-14" style="padding-top: 44rpx;">
						<view class="text-606266">还需支付</view>
						<view class="font-600 text-D33030">
							<text class="me-2 font-18">{{pay_card_info.pay_money===null?'-':pay_card_info.pay_money }}</text>
							<text>元</text>
						</view>
					</view>
				</view>
				<view class="pt-58" v-else-if="current==1">
					<view class="d-flex justify-between font-14">
						<view class="text-606266">余额支付 <text style="">（当前余额为{{orderInfo.balance||0}}元）</text></view>
						<view class="font-600">
							<text class="me-2 ">{{pay_blance_info.balance}}</text>
							<text>元</text>
						</view>
					</view>
					<view class="d-flex justify-between font-14" style="padding-top: 44rpx;">
						<view class="text-606266">还需支付</view>
						<view class="font-600 text-D33030">
							<text
								class="me-2 font-18">{{pay_blance_info.pay_money===null?'-':pay_blance_info.pay_money }}</text>
							<text>元</text>
						</view>
					</view>
				</view>
				<view class="pt-58" v-else-if="current==2">
					<view class="d-flex justify-between font-14">
						<view class="text-606266">优惠券</view>
						<view class="" @click="showCouponModal">
							<text class="me-1 font-600">{{chooseCouponInfo.name?chooseCouponInfo.name:'请选择'}} </text>
							<u-icon name="arrow-down" color="#889297"></u-icon>
						</view>
					</view>
					<view class="d-flex justify-between font-14" style="padding-top: 44rpx;">
						<view class="text-606266">还需支付</view>
						<view class="font-600 text-D33030">
							<text class="me-2 font-18">
								{{pay_wechat_info.pay_money===null?'-':pay_wechat_info.pay_money }}</text>
							<text>元</text>
						</view>
					</view>
				</view>
				<view class="banka" @click="jumpTab">
					办卡享更多折扣优惠，立即去办卡
				</view>
			</view>
			<!-- <view class="mt-12 bg-white brs-12 px-3 pt-2 d-flex flex-column pb-3">
				<view class="d-flex align-items-center justify-content-between border-line pay" @click="payType(1)">
					<view>
						<text class="text-222426 font-600">会员卡支付</text>
						<text class="promotion_text" @click="itemClick(9)" style="margin-left: 40rpx;">购买会员卡</text>
					</view>


					<image v-if="1==idx" class="img-64" src="../../static/imgs/choose-fill.png" mode=""></image>
					<image v-else :class="orderInfo.support_cards_count==0||totalPrice==0?'img-gray':''" class="img-64"
						src="../../static/imgs/choose.png" mode=""></image>
				</view>
				<view class="d-flex align-items-center justify-content-between border-line pay" @click="payType(2)">
					<view>
						<text class="text-222426 font-600">团购券支付</text>
					</view>
					<image v-if="2==idx" class="img-64" src="../../static/imgs/choose-fill.png" mode=""></image>
					<image v-else :class="orderInfo.support_cards_count==0||totalPrice==0?'img-gray':''" class="img-64"
						src="../../static/imgs/choose.png" mode=""></image>
				</view>
				<view class="d-flex align-items-center justify-content-between border-line pay" @click="payType(3)">
					<view>
						<text class="text-222426 font-600">余额支付（余额{{orderInfo.balance}}元）</text>
						<text class="promotion_text" @click="itemClick(2)">充值更优惠</text>
					</view>
					<image v-if="idx==3" class="img-64" src="../../static/imgs/choose-fill.png" mode=""></image>
					<image v-else
						:class="orderInfo.balance==0||totalPrice==0||orderInfo.balance<totalPrice?'img-gray':''"
						class="img-64" src="../../static/imgs/choose.png" mode=""></image>
				</view>
				<view class="d-flex align-items-center justify-content-between border-line  pay" @click="payType(4)">
					<text class="text-222426 font-600">微信支付</text>
					<image v-if="idx==4" class="img-64" src="../../static/imgs/choose-fill.png" mode=""></image>
					<image v-else :class="totalPrice==0?'img-gray':''" class="img-64" src="../../static/imgs/choose.png"
						mode=""></image>
				</view>
				<view class="d-flex align-items-center pb-12 pt-3">
					<image class="img-36 me-1" src="../../static/imgs/warning.png" mode=""></image>
					<text class="text-222426 font-600 font-14">注意事项</text>
				</view>
				<view class="d-flex flex-column text-666D73 font-14 font-500">
					<text class="py-1">请您仔细核对预订时间，我们采用的24小时制哦。如有任何问题请联系客服18581555163，微信同号</text>
				</view>

			</view> -->
			<view class="mt-3 agree-head d-flex  " style="padding-bottom: 200rpx;">
				<u-checkbox-group @change="checkboxGroupChange" style="padding-top: 4rpx;">
					<u-checkbox v-model="checked"></u-checkbox>
				</u-checkbox-group>
				<view class="font-12 agree flex-1">
					请阅读和勾选表示你同意以下协议
					<text v-if="orderInfo.agree_data" @click="goAgree(item)" class=""
						v-for="item,index in orderInfo.agree_data" :key="index">
						《{{item.title}}》{{index==orderInfo.agree_data.length-1?'':'，' }}
					</text>
				</view>
			</view>
			<view class="go position-fixd bg-white w-100">
				<view class="d-flex justify-content-between align-items-center">
					<view class=" d-flex align-items-center position-relative ps-12 ms-2">
						<image class="warning" src="../../static/imgs/kf.png" mode=""></image>
						<text class="font-500 text-222426 font-14 ps-1">客服</text>
						<button open-type="contact" class="btnc"></button>
					</view>
					<view class="d-flex justify-content-end align-items-center">
						<!-- <view v-if="idx>=3" class="text-theme pe-12 d-flex flex-column align-items-end">
							<view class="font-12">共计：<text class="font-28 font-bold">{{totalPrice}}</text><text
									style="padding-left: 6rpx;">元</text> </view>
							<view class="text-EE2D21 font-12 font-500" v-if="preferentialPrice">
								共减¥{{preferentialPrice}}元
							</view>
						</view> -->
						<view class="btns" @click="submitPay">
							<!-- <button open-type="getPhoneNumber" v-if="!vuex_user.mobile" @click.stop
								@getphonenumber="getphonenumber" :disabled="idx==-1&&totalPrice" class="btn bg-theme">
								<text v-show="!totalPrice">完成预约</text>
								<text v-show="totalPrice">{{idx>=3?'下一步':'去支付'}}</text></button>
							<button :disabled="idx==-1&&totalPrice" v-else class="btn bg-theme">
								<text v-show="!totalPrice">完成预约</text>
								<text v-show="totalPrice">{{idx>=3?'下一步':'去支付'}}</text>
							</button> -->
							<button class="btn bg-theme" open-type="getPhoneNumber" v-if="!vuex_user.mobile" @click.stop
								@getphonenumber="getphonenumber" :class="!current&&!card_list?'bg-gray':'bg-theme'">
								支付订单</button>
							<button class="btn bg-theme" v-else :class="!current&&!card_list?'bg-gray':'bg-theme'">
								<text>支付订单</text>
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-picker mode="selector" @confirm="confirmCoupon" v-model="show" :default-selector="[0]" :range="couponList"
			range-key="name"></u-picker>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				moment: moment,
				idx: 4,
				group_code: '',
				couponList: [],
				chooseCouponInfo: {
					name: '',
					id: 0
				},
				checked: uni.getStorageSync('checkd') || false,
				show: false,
				orderInfo: {
					'balance': '0',
				},
				preferentialPrice: 0,
				list: [{
					name: '卡券支付'
				}, {
					name: '余额支付'
				}, {
					name: '微信支付',
				}],
				current: 0,
				card_info: {
					card_id: 0
				},
				pay_card_info: {
					pay_money: null,
				},
				pay_blance_info: {
					pay_money: null,
					balance: ''
				},
				pay_wechat_info: {
					pay_money: null,
				},
				isFirst: 0,
				card_list: 0
			};
		},
		onUnload() {
			uni.$off('card')
		},
		onLoad() {

			uni.$on('card', (e) => {
				console.log(e);
				this.card_info = e
				this.calcPrice(0)
			})
			// #ifdef MP-WEIXIN
			wx.enableAlertBeforeUnload({
				message: "返回后将删除此预约",
			});
			// #endif
			this.getUserCoupon()
			this.$u.api.getPayPageInfo(this.vuex_reserve_info)
				.then((res) => {
					if (1 == res.code) {
						console.log(res);
						this.orderInfo = res.data
						this.$u.vuex('vuex_reserve_info', res.data) // 改变了本地vuex_reserve_info的值，如果用户返回到上一页，将删除此创建的订单
						this.getCardNum()
						// this.calcPrice(0)
					} else {
						uni.showModal({
							content: res.msg,
							showCancel: false,
							success: () => {
								this.$u.route({
									url: '/pages/index/index',
									type: 'tab',
								})
							}
						})
					}
				})
		},
		watch: {
			totalPrice(val) {
				if (!val) {
					this.idx = -1
				}
			}
		},
		computed: {
			totalPrice() {
				if (this.orderInfo.price <= this.preferentialPrice) {
					return 0
				}
				return this.orderInfo.price - this.preferentialPrice
			}
		},

		methods: {
			showCouponModal() {
				if (!this.couponList.length) return this.$u.toast('你暂时没有可用优惠券')
				this.show = true
			},
			jumpTab() {
				this.$u.api.deleteReservationApi({
					id: this.orderInfo.reserve_id
				}).then((res) => {
					this.$u.vuex('vuex_reserve_info', {})
				}).finally(() => {
					this.$u.route({
						type: 'tab',
						url: 'pages/members/members'
					})
				})
			},
			getCardNum() {
				this.$u.api.getVoucherPayPageInfo(this.vuex_reserve_info)
					.then((res) => {
						if (1 == res.code) {
							this.card_list = res.data.length
						} else {
							this.card_list = []
							this.$u.toast(res.msg)
						}
					})
			},
			changeTabs(index) {
				this.current = index
				if (!this.isFirst && index == 2) {
					this.calcPrice(index)
				}
				if (index == 1) {
					this.calcPrice(index)
				}
			},
			submitPay() {
				if (!this.current && !this.card_list) return
				if (!this.current && !this.card_info.card_name) return this.$u.toast('请选择卡券')
				this.calcPrice(this.current, 1)
			},

			calcPrice(index, type = 0) {
				if (!this.checked && type) {
					return uni.showModal({
						title: '温馨提示',
						content: '请阅读加登舞蹈空间的以下协议',
						showCancel: false,
						confirmText: '我知道了'
						// success: (res) => {
						// 	if (res.confirm) {
						// 		this.checked = true
						// 		uni.setStorageSync('checkd', true);
						// 	}
						// }
					});
				}

				this.$u.api.selectPaysApi({
					pay_mode: type,
					"pay_type": ["card", 'balance', 'wechat'][index],
					"reserve_id": this.orderInfo.reserve_id,
					...(index == 0 ? {
						"card_id": this.card_info.card_id,
						timepills: this.orderInfo.timepills
					} : {}),
					...(index == 2 ? {
						couponid: this.isFirst ? this.chooseCouponInfo.id : 0,
					} : {})
				}).then(res => {
					if (res.code == 1) {
						if (!type) {
							if (!index) {
								this.pay_card_info = res.data
							}
							if (index == 1) {
								this.pay_blance_info = res.data
							}
							if (index == 2) {
								this.pay_wechat_info = res.data
								if (!this.isFirst) {
									this.chooseCouponInfo.name = res.data.coupon_name
									this.chooseCouponInfo.id = this.chooseCouponInfo.couponid
									this.chooseCouponInfo.price = res.data.discout_price
									this.isFirst = 1
								}
								this.show = false
							}
						} else {
							if (!res.data) {
								this.$u.toast('你的预约成功')
								this.getInfo()
								setTimeout(() => {
									this.$u.route({
										url: '/pages/myReservation/myReservation',
										type: 'tab',
									})
								}, 1500)
							} else {
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.data.timeStamp,
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									signType: res.data.signType,
									paySign: res.data.paySign,
									success: (ress) => {
										if (ress.errMsg == 'requestPayment:ok') {
											this.$u.toast('你的预约成功')
											this.getInfo()
											setTimeout(() => {
												this.$u.route({
													url: '/pages/myReservation/myReservation',
													type: 'tab',
												})
											}, 1500)
										}

									},
									fail: (err) => {
										if (err.errMsg == "requestPayment:fail cancel") {
											this.$u.toast('你已取消支付')
										} else {
											this.$u.toast('如果预约失败，请联系管理员')
										}

									}
								});
							}
						}
					} else {
						this.$u.toast(res.msg)
					}
				})
			},

			goHome() {
				this.$u.route({
					url: '/pages/index/index',
					type: 'tab'
				})
			},
			deleteOrder() {
				this.$u.api.deleteReservationApi({
					id: this.orderInfo.reserve_id
				}).then((res) => {
					this.$u.vuex('vuex_reserve_info', {})
					this.$u.toast('待支付时间结束，请重新预约', 3000)
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 3000)
				})
			},

			getUserCoupon() {
				this.$u.api.getUserUnusedCoupon().then((res) => {
					if (res.code) {
						this.couponList = res.data
					} else {
						this.couponList = []
					}
					// .map(e => {
					// 	return {
					// 		...e,
					// 		// name: e.min_price == 0 ? '(立减)' + e.name : `(满减)${e.min_price}元减${e.price}元优惠券`
					// 		name: e.min_price == 0 ? '(立减)' + e.name : `(满减)${e.name}`
					// 	}
					// })
					if (res.data.length) {
						this.couponList.unshift({
							endtime: "",
							id: -1,
							name: "暂不使用优惠券",
							price: 0,
							starttime: ""
						})
					}
				})
			},
			getInfo() {
				if (this.vuex_has_login) {
					this.$u.api.getUserInfo().then(res => {
						this.$u.vuex('vuex_user', {
							...this.vuex_user,
							...res.data
						})
					})
				}
			},

			checkboxGroupChange() {
				uni.setStorageSync('checkd', this.checked);
			},

			goPay() {
				//支付成功后调用getInfo 更新vuex数据
				if (!this.checked) {
					return uni.showModal({
						title: '温馨提示',
						content: '请阅读加登舞蹈空间的以下协议',
						showCancel: false,
						confirmText: '我知道了'
						// success: (res) => {
						// 	if (res.confirm) {
						// 		this.checked = true
						// 		uni.setStorageSync('checkd', true);
						// 	}
						// }
					});
				}

				if (this.totalPrice == 0) {
					//这里是优惠券使用后价格为0的处理
					this.$u.api.otherPay({
						reserve_id: this.orderInfo.reserve_id,
						room_id: this.vuex_reserve_info.room_id,
						selectdate: this.vuex_reserve_info.selectdate,
						start: this.orderInfo.starttime,
						end: this.orderInfo.endtime,
						price: this.totalPrice,
						...this.chooseCouponInfo.id ? {
							couponid: this.chooseCouponInfo.id
						} : {}
					}).then(res => {
						if (1 == res.code) {
							this.$u.toast('你的预约成功')
							this.getInfo()
							setTimeout(() => {
								this.$u.route({
									url: '/pages/myReservation/myReservation',
									type: 'tab',
								})
							}, 1500)
						} else {
							this.$u.toast(res.msg, 3000)
						}
					}, err => {
						this.$u.toast('如果预约失败，请联系管理员')
					})
					return
				}
				if (1 == this.idx || 2 == this.idx) {
					return this.$u.route({
						url: 'pages/index/cardPayment'
					})
				}

				if (this.idx == 3) {
					//余额支付
					uni.showModal({
						title: '提示',
						content: `你确认要余额支付: ${this.totalPrice}吗？`,
						success: (res) => {
							if (res.confirm) {
								this.$u.api.balancePay({
									reserve_id: this.orderInfo.reserve_id,
									room_id: this.vuex_reserve_info.room_id,
									selectdate: this.vuex_reserve_info.selectdate,
									start: this.orderInfo.starttime,
									end: this.orderInfo.endtime,
									price: this.totalPrice,
									...this.chooseCouponInfo.id ? {
										couponid: this.chooseCouponInfo.id
									} : {}
								}).then(res => {
									if (1 == res.code) {
										this.$u.toast('你的预约成功')
										this.getInfo()
										setTimeout(() => {
											this.$u.route({
												url: '/pages/myReservation/myReservation',
												type: 'tab',
											})
										}, 1500)
									} else {
										this.$u.toast(res.msg, 3000)
									}
								}, err => {
									this.$u.toast('如果预约失败，请联系管理员')
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					//微信支付
					uni.showModal({
						title: '提示',
						content: `你确认要微信支付: ${this.totalPrice}吗？`,
						success: (res) => {
							if (res.confirm) {
								this.$u.api.createTransaction({
									type: 1, // 预约直接下单
									reserve_info: {
										reserve_id: this.orderInfo.reserve_id,
										room_id: this.vuex_reserve_info.room_id,
										selectdate: this.vuex_reserve_info.selectdate,
										start: this.orderInfo.starttime,
										end: this.orderInfo.endtime,
										price: this.totalPrice,
										...this.chooseCouponInfo.id ? {
											couponid: this.chooseCouponInfo.id
										} : {}
									},
								}).then(res => {
									if (0 == res.code) {
										this.$u.toast(res.msg, 3000)
										return
									}
									let data = res.data
									return new Promise((resolve, reject) => {
										uni.requestPayment({
											provider: 'wxpay',
											timeStamp: data.timeStamp,
											nonceStr: data.nonceStr,
											package: data.package,
											signType: data.signType,
											paySign: data.paySign,
											success: function(res) {
												resolve(res)
											},
											fail: function(err) {
												reject(err);
											}
										});
									})
								}).then(res => {
									if (res.code = 1) {
										this.$u.toast('你的预约成功')
										this.getInfo()
										setTimeout(() => {
											this.$u.route({
												url: '/pages/myReservation/myReservation',
												type: 'tab',
											})
										}, 1500)
									} else {
										this.$u.toast(res.msg)
									}
								}, err => {
									this.$u.toast('如果预约失败，请联系管理员')
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}



			},
			chooseCard() {
				this.$u.route({
					url: 'pages/index/cardPayment'
				})
			},
			payType(type) {
				if (!this.totalPrice) return
				if (this.orderInfo.support_cards_count == 0 && (type == 1 || type == 2)) return
				if (this.orderInfo.balance == 0 && type == 3) return
				if (this.orderInfo.balance < this.totalPrice && type == 3) return
				this.idx = type
				if (!type) {
					this.chooseCouponInfo = {}
					this.preferentialPrice = 0
					// return this.goPay()
					// this.idx=1
				}
			},
			showModal() {
				if (this.idx < 3 || !this.couponList.length) return
				this.show = true
			},
			confirmCoupon([index]) {
				if (!index) {
					this.chooseCouponInfo = {
						id: 0,
						name: ''
					}
					this.pay_wechat_info = {
						pay_money: this.orderInfo.price,
					}
					return this.show = false
				}
				if (this.orderInfo.price < this.couponList[index].min_price) {
					return this.$u.toast(`金额未达到${this.couponList[index].min_price},请重新选择`)
				}
				this.chooseCouponInfo = this.couponList[index]
				this.calcPrice(2)

				this.preferentialPrice = this.couponList[index].price

			},
			getphonenumber(res) {
				if (res.detail.errMsg == 'getPhoneNumber:fail user deny') {} else if ("getPhoneNumber:ok" == res.detail
					.errMsg) {
					this.$u.api.getUserPhoneFromMP({
							encryptedData: res.detail.encryptedData,
							iv: res.detail.iv,
						})
						.then(res => {
							this.$u.api.getUserInfo().then(resg => {
								this.$u.api.setUserInfo({
										...resg.data,
										mobile: res.data.phone
									})
									.then(ress => {
										if (1 == ress.code) {
											this.$u.vuex('vuex_user', Object.assign(resg.data, ress.data))
											this.submitPay()
										} else {
											this.$u.toast(ress.msg);
										}
									})
							})
						})
				}
			},
			goAgree(item) {
				this.$u.route({
					url: '/pages/index/agreeMent',
					params: {
						...item
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.promotion_text {
		font-size: 30rpx;
		color: #EC9F3C;
		font-weight: 500;
	}

	.border-line {
		border-bottom: 1px solid #f5f7f8;
	}

	.page {
		.img-36 {
			width: 36rpx;
			height: 36rpx;
		}

		.info {

			background: #D85886;
		}

		.pay {
			padding: 22rpx 0;

			.img-64 {
				width: 64rpx;
				height: 64rpx;
			}
		}

		.go {
			padding: 16rpx 0 28rpx 0;
			left: 0;
			bottom: 0;
			box-shadow: -2rpx 0rpx 2rpx 0rpx rgba(0, 0, 0, 0.25);

			.btns {
				padding-right: 40rpx;

				.btn {
					width: 240rpx;
					height: 80rpx;
					line-height: 80rpx;
					color: rgb(255, 255, 255);
					font-weight: 600;
					border-radius: 40rpx 0 40rpx 40rpx;

					&[disabled]:not([type]) {
						background-color: #AAB5BF !important;
					}
				}
			}


		}
	}

	.save-action {
		left: 50%;
		transform: translateX(-50%);
		bottom: 128rpx;
		width: 100%;

	}

	.coupon-tip {
		color: #EE2D21;
		padding: 2rpx 12rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #EE2D21;
	}

	.img-gray {
		filter: grayscale(1);
	}

	.warning {
		width: 36rpx;
		height: 36rpx;
		vertical-align: middle;
	}

	.btnc {
		top: 0;
		left: 0;
		width: 100%;
		height: 36rpx;
		position: absolute;
		border: none;
		z-index: 55;
		background-color: transparent;
		padding: 0;

		&::after {
			border: none;
		}
	}

	.agree-head {
		align-items: flex-start;
		line-height: 40rpx;
	}

	.agree {
		margin-left: -20rpx
	}

	.active {

		background: #FA9C10;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		color: #fff;
	}

	.tab {
		height: 72rpx;
		line-height: 72rpx;
	}

	.text-606266 {
		color: #606266;
	}

	.pt-58 {
		padding-top: 58rpx;
		padding-bottom: 80rpx;
	}

	.banka {
		width: 552rpx;
		height: 88rpx;
		background: #FA9C10;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin: 0 auto;
		margin-bottom: 36rpx;
	}

	.bg-gray {
		background-color: #989898 !important;
	}
	.text-D33030{
		color: #D33030;
	}
</style>